<template>
  <div class="ClassifyPage">
    <div class="background">
      <ul class="classiyfList">
        <li v-for="c in classifyList" @click="getClassifyBlog(c.classifyId,c.classifyName)">
          {{ c.classifyName }}
        </li>
      </ul>
    </div>
    <div class="banner">
      <h1 v-show="!isShow">该分类下没有内容</h1>
      <h1 style="" v-show="isShow">{{classifyName}}</h1>
      
    </div>
    <div class="BlogList" v-show="isShow">
      <div
        v-for="b in blogList.slice(
          (currentPage - 1) * pageSize,
          currentPage * pageSize
        )"
        :key="b.blogId"
        :xs="24"
        v-loading="loading"
      >
        <h3 @click="getBlog(b.blogId)">{{ b.title }}</h3>
        <p>
          <img
            v-show="b.blogCover"
            :src="b.blogCover"
            class="img"
          ></img>
          {{ b.content.substring(0, 150) }}
        </p>
        <p>
          <a @click="getBlog(b.blogId)">继续阅读</a>
        </p>
        <p class="info">
          <span>作者：{{ b.userName }}</span>
          {{ b.creationDate.substring(0, 11) }}
        </p>
      </div>
    </div>
    <el-pagination v-show="isShow"
      layout="total, prev, pager, next,jumper"
      :total="total"
      @size-change="handleSizeChange"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "ClassifyPage",
  data() {
    return {
      classifyList: [],
      blogList: [],
      loading: true,
      currentPage: 1, //当前页数
      pageSize: 5, //当前页记录数
      total: 0, //总条数
      blogTitle: "",
      isCover: true,
      isShow:true,
      classifyName:''
    };
  },
  methods: {
    loadClassify() {
      this.axios.get("/classify/select").then((res) => {
        this.classifyList = res.data.data;
      });
    },
    getClassifyBlog(id,classifyName) {
      this.axios.get(`/blog/classify/${id}`).then((res) => {
        this.blogList = res.data;
        this.loading = false;
        this.total = this.blogList.length;
        this.classifyName = classifyName;
        this.blogList.forEach((element) => {
          if (element.blogCover != null && element.blogCover != "") {
            element.blogCover =
              this.axios.defaults.baseURL + "/" + element.blogCover;
          }
        });
        if(this.blogList.length==0){
            this.isShow = false;
        }
        else{
          this.isShow = true;
        }
      });
    },
    getBlog(id) {
      this.$router.push("./blogDetail/" + id);
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
  created() {
    this.loadClassify();
    this.getClassifyBlog(1,"经验总结");
  },
};
</script>

<style>

.ClassifyPage .background {
  height: 600px;
  background: url("../../static/image/img.jpg");
  opacity: 0.8;
  color: white;
  position: relative;
}
.ClassifyPage .classiyfList {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
}

.ClassifyPage .classiyfList li {
  float: left;
  margin: 20px;
  font-size: 40px;
}

.ClassifyPage .classiyfList li:hover{
  color: #3da4ee;
  transition: all 0.2s;
  cursor: pointer;
}
.ClassifyPage .BlogList div {
  width: 70%;
  margin: 50px auto;
  color: #303030;
  position: relative;
}
.ClassifyPage .BlogList div h3 {
  font-size: 30px;
  font-weight: 500;
}

.ClassifyPage .BlogList div h3:hover {
  color: #1279c4;
  cursor: pointer;
}

.ClassifyPage .BlogList div P {
  margin: 10px 0px 20px 0px;
}

.ClassifyPage .el-pagination {
  width: 70%;
  text-align: center;
  margin: 20px auto;
}
.ClassifyPage a {
  text-decoration: underline;
  font-size: 15px;
}

.ClassifyPage a:hover {
  cursor: pointer;
  color: rgb(117, 109, 109);
}

.BlogList div .info {
  font-size: 15px;
  color: rgb(161, 167, 173);
}

.BlogList div .info span {
  margin-right: 20px;
}

.BlogList .img {
  width: 200px;
  height: 130px;
  float: left;
  margin: 0px 30px 0px 0px;
}

.ClassifyPage .banner{
  text-align:center;
  margin:30px 0px;
  color: #303030;
}
</style>